import React, { useContext } from "react";
import { SearchOutlined } from "@ant-design/icons";
import { Input } from "antd";
import { useTranslation } from "react-i18next";
import "./index.less";
import { useGlobalData } from "@/pages/BigScreen/context/chat";
const { Search } = Input;
interface IProps {
  value: any;
  placeholder?: string;
  onChange: (e: any) => void;
}

const GroupSearch: React.FC<IProps> = ({ value, placeholder, onChange }) => {
  // Component State
  const { t } = useTranslation();
  const global = useGlobalData();
  const { theme } = global;
  // Component Effect
  return (
    <div className={`home-group-search home-group-search-${theme}`}>
      <Search
        placeholder={placeholder || t("common.pleaseEnter")}
        value={value}
        onChange={onChange}
        allowClear
      />
    </div>
  );
};

export default GroupSearch;
